<template>
  <div class="tab-pane">
    <div class="tab-pane-content" v-show="$parent.activeName == name" :key="key">
      <slot name="default"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tabPane',
  props: {
    // tab项的文本或者render函数
    label: {
      type: [String, Function],
    },
    // 每项标识
    name: {
      type: [String,Number],
    },
    // 是否禁用当前项
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  watch:{
    label(val) {

    },
    '$parent.activeName':{
      handler(val) {

      },
      deep:true
    }
  },
  data() {
    return {
      key:0
    }
  },
  created() {
    // 统一tab的数据给父组件进行处理和渲染
    this.$parent.setTabBar(this)
  },
  beforeDestroy() {
    this.$parent.removeTabBar(this)
  },
  activated() {
  }
}
</script>

<style scoped>

.tab-pane-content {
  font-size: 14px;
  color: #333333;
}

</style>
